---
title: Installation
description: Getting started with KokonutUI
icon: ListStart
---

### 1. Add namespaces with components.json

The components.json file holds configuration for your project, and allow easy installation of any components.

<Card
title="Note: The `components.json` file is optional"
>
It is only required if you're using the CLI to add components to your project. If you're using the copy and paste method, you don't need this file.
</Card>

You can create a components.json file in your project by running the following command:

<Tabs items={["bun", "npx", "pnpm"]}>
 
```bash tab="bun"
bunx --bun shadcn@latest init
```
 
```bash tab="npx"
npx shadcn@latest init
```

```bash tab="pnpm"
pnpm dlx shadcn@latest init
```

</Tabs>

Then, you'll need to add this to your `components.json` to allow kokonutUI registry.

```json
{
    "registries": {
        "@kokonutui": "https://kokonutui.com/r/{name}.json"
    }
}
```

### 2. Install utilities

All components use [Tailwind CSS v4](https://tailwindcss.com/docs/installation/framework-guides/nextjs), so ensure it's installed in your project.
Many components also use the `cn` utility function—install it with the following command:

<Tabs items={["bun", "npx", "pnpm"]}>
 
```bash tab="bun"
bunx --bun shadcn@latest add https://kokonutui.com/r/utils.json 
```
 
```bash tab="npx"
npx shadcn@latest add https://kokonutui.com/r/utils.json
```

```bash tab="pnpm"
pnpm dlx shadcn@latest add https://kokonutui.com/r/utils.json
```

</Tabs>

### 3. That's it 🎉

We use [lucide-icons](https://lucide.dev/guide/installation) for most components that include icons, along with some [shadcn/ui](https://ui.shadcn.com/) components. These dependencies will be automatically installed when using the CLI.

For exemple to add `particle-button` component to your project, it will be easy as:

<Tabs items={["bun", "npx", "pnpm"]}>
 
```bash tab="bun"
bunx --bun shadcn@latest add @kokonutui/particle-button
```
 
```bash tab="npx"
npx shadcn@latest add @kokonutui/particle-button
```

```bash tab="pnpm"
pnpm dlx shadcn@latest add @kokonutui/particle-button
```

</Tabs>

_While we provide a convenient 'copy' button for the code, we strongly recommend using the CLI for installing components, as it ensures all necessary files are included._

Add to your page and it works!

```jsx
import ParticleButton from "@/components/kokonutui/particle-button";

export default function Page() {
    return <ParticleButton />;
}
```

import { Tab, Tabs } from "fumadocs-ui/components/tabs";

### 4. Optionnal dependencies

Some components require additional libraries, listed at the bottom of each components. Make sure to install them to ensure the component works properly.

### 5. Monorepo

For monorepo `shadcn/ui` CLI contain the options `-c` to the path to your workspace for exemple:

<Tabs items={["bun", "npx", "pnpm"]}>
 
```bash tab="bun"
bunx --bun shadcn@latest add @kokonutui/particle-button -c ./apps/www
```
 
```bash tab="npx"
npx shadcn@latest add @kokonutui/particle-button -c ./apps/www
```

```bash tab="pnpm"
pnpm dlx shadcn@latest add @kokonutui/particle-button -c ./apps/www
```

</Tabs>
